<!DOCTYPE html>
<!--63.尚硅谷_css3_flex案例-->
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: gray;
				display: block;
			}
			#nav > .row{
				display: flex;
			}
			#nav > .row > .item{
				flex: 1;
				text-align: center;
			}
			
			#nav > .row > .item > a:before{
				content: "";
				display: block;
				width: 86px;
				height: 86px;
				margin: 0 auto;
				background: url(img/01.png) no-repeat;
			}
		</style>
	</head>

	<body>
		<div id="nav">
			<div class="row">
				<div class="item">
					<a href="javascript:;">天猫</a>
				</div>
				<div class="item">
					<a href="javascript:;">聚划算</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫国际</a>
				</div>
				<div class="item">
					<a href="javascript:;">外卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫超市</a>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<a href="javascript:;">充值中心</a>
				</div>
				<div class="item">
					<a href="javascript:;">飞猪旅行</a>
				</div>
				<div class="item">
					<a href="javascript:;">领金币</a>
				</div>
				<div class="item">
					<a href="javascript:;">拍卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">分类</a>
				</div>
			</div>
		</div>
	</body>

</html>